<html>
	<head>
		<title>JAM with Chrome Demo</title>

    <style type="text/css">

      body {
        background-color: #F8F8F8!important;
        color: #424242;
        text-align: center;
        font-size: 24px;
        font-family: 'Helvetica',sans-serif;
      }

      a {
        color: #000;
      }
      
			#wrapper {
				position: relative;
				width: 400px;
				margin: 50px auto;
				text-align: left;
				font-size: 12px;
			}

			#stage {
				position: absolute;
				width: 400px;
				height: 300px;
				background: rgba(0,0,0,.1);
				z-index: 10;
			}
			#box {
				position: absolute;
				top: 125px;
				left: 175px;
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
  	<h3>JAM with Chrome Demo</h3>
		<div id="header">
			Example 1 | 
			<a href="hit2.html">Example 2</a> | 
			<a href="hit3.html">Example 3</a> |
			<a href="hit4.html">Example 4</a>
		</div>

		<div id="wrapper">
			<div id="stage"></div>
			<div id="output"></div>
		</div>
		
		<script>
			

			function Stage(el) {
				this.el = document.getElementById(el);
				this.elOutput = document.getElementById("output");
				
				this.position();
				this.listeners();

				return this;
			}
			
			Stage.prototype.position = function() {
			  var offset = this.offset();
			  this.positionTop = Math.floor(offset.top);
			  this.positionLeft = Math.floor(offset.left);
			};
			
			Stage.prototype.offset = function() { 
			  var _x, _y,
			      el = this.el;
			  
			  if (typeof el.getBoundingClientRect !== "undefined") {
			    return el.getBoundingClientRect();
			  }else{
			    _x = 0;
			    _y = 0;
			    while(el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
			      _x += el.offsetLeft;
			      _y += el.offsetTop;
			      el = el.offsetParent;
			    }
			    return { top: _y - window.scrollY, left: _x - window.scrollX };
			  }
			};
      
      Stage.prototype.listeners = function() {
        var _self = this,
            output = this.elOutput;

        window.addEventListener('resize', function(){
          _self.position();
        }, false);
  
        window.addEventListener('scroll', function(){
          _self.position();
        }, false);
  
        this.el.addEventListener('mousemove', function(e){
          var x = e.clientX - _self.positionLeft,
              y = e.clientY - _self.positionTop;
  
          output.innerHTML = (x + "," + y);
  
        }, false);
      };
      
			var stage = new Stage("stage");
		</script>
	</body>
</html>